<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrapper{
            margin: 100px auto;
            width: 500px;
            height: 300px;
            text-align: center;
            font-size: 30px;
        }
        .wrapper .time-wrapper{
            margin-top: 50px;
        }
        .time{
            padding: 5px 10px;
            background-color: orange;
            border-radius: 5px;
            color: #fff;
        }
        .time.day{
            color: orange;
            background: #fff;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <strong><p class="p">距离今天结束还有</p></strong>
        <div class="time-wrapper">
            <span class="time day">00天</span>
            <strong><span class="time hour">00时</span></strong>
            <strong><span class="time minute">00分</span></strong>
            <strong><span class="time second">00秒</span></strong>
        </div>
    </div>

    <script>
        day = document.querySelector('.day');
        hour = document.querySelector('.hour');
        minute = document.querySelector('.minute');
        second = document.querySelector('.second');
        var dayTime = 0;
        var hourTime = 0;
        var minuteTime = 0;
        var secondTime = 0;
        // 输入字符串标准的date串
        Countdown('2020-07-11 00:00:00');

        function Countdown(target) {
            var targetTime = new Date(target);
            // 1秒钟置换毫秒
            var SMS = 1000;
            // 一分钟置换毫秒
            var MMS = 60*SMS;
            // 小时置换毫秒
            var HMS = 60*MMS;
            // 天置换毫秒
            var DMS = 24*HMS;

            setInterval(function () {
                var nowTime = new Date();
                // 算出距离目标的时间
                var allTime = targetTime - nowTime;
                // 计算天时分秒
                dayTime = Math.floor( allTime/DMS );
                dayTime = transition(dayTime);

                hourTime = Math.floor( (allTime%DMS)/HMS );
                hourTime = transition(hourTime);

                minuteTime = Math.floor( (allTime%HMS)/MMS );
                minuteTime = transition(minuteTime);

                secondTime = Math.floor( (allTime%MMS)/SMS );
                secondTime = transition(secondTime);

                // 将时间放入容器
                day.innerText = dayTime + '天';
                hour.innerText = hourTime + '时';
                minute.innerText = minuteTime + '分';
                second.innerText = secondTime + '秒';
            }, 1000)

            // 小于10的时候显示 0x
            function transition(num) {
                if (num < 10) {
                    return '0' + num;
                }
                return num;
            }
        }

    </script>
</body>
</html>